一文了解 Flutter 3.24 中的新功能和增强功能

作者 / Kevin Chisholm

欢迎查收最新的 Flutter 更新！Flutter 3.24 推出了许多令人兴奋的新功能和增强功能，以提升您的应用开发体验。此次发布的亮点是 Flutter GPU 的预览版，可直接在 Flutter 中渲染高级图形和 3D 场景。Web 应用现在可以嵌入多个 Flutter 视图，从而提高应用的多功能性。最后，我们添加了视频广告变现支持，以帮助您实现收入最大化。

在过去的几个月里，Flutter 社区非常活跃，共提交 852 个框架和 615 个引擎。在此，我们对帮助我们完成此版本的 49 位新贡献者表示诚挚的感谢。各位的奉献和热情是推动 Flutter 前进的动力。

欢迎您阅读文章，深入了解 Flutter 社区为最新版本带来的所有新功能和增强功能！

Flutter 框架

新的 Sliver

此版本中添加了新的 Sliver，可以组合在一起实现动态应用栏行为：

• PinnedHeaderSliver
• SliverResizingHeader

🔗 PinnedHeaderSliver

http://api.flutter.dev/flutter/widgets/PinnedHeaderSliver-class.html

🔗 SliverResizingHeader

https://api.flutter.dev/flutter/widgets/SliverResizingHeader-class.html

您可以使用这些新的 Sliver，在用户滚动浏览时使标头浮动、保持固定或调整其大小。这些新的 Sliver 类似于现有的 SliverPersistentHeader 和 SliverAppBar Sliver，但 API 更简单，可组合以获得更好的效果。

🔗 SliverPersistentHeader

https://api.flutter.dev/flutter/widgets/SliverPersistentHeader-class.html

🔗 SliverAppBar 

https://api.flutter.dev/flutter/material/SliverAppBar-class.html

这些新的 Sliver 附带了新的示例代码。例如，PinnedHeaderSliver 的 API 文档中有一个示例，可以重现 iOS 设置应用的应用栏等效果：

Cupertino 库更新

在此版本中，我们提高了 CupertinoActionSheet 的保真度。现在，系统会在您的手指滑过操作表按钮时提供触感反馈。按钮的字体大小和粗细现在与原生按钮相匹配。

🔗 CupertinoActionSheet

https://api.flutter.dev/flutter/cupertino/CupertinoActionSheet-class.html

我们还为 CupertinoButton 添加了新的焦点属性，您现在可以对已禁用的 CupertinoTextField 自定义颜色。

🔗 CupertinoButton

https://api.flutter.dev/flutter/cupertino/CupertinoButton-class.html

🔗 CupertinoTextField

https://api.flutter.dev/flutter/cupertino/CupertinoTextField-class.html

对 Cupertino 库的更新正在进行中，请期待未来版本中的更多更新！

TreeView

我们在 two_dimensional_scrollables package 中添加了 TreeView widget，以及几个配套类，用于构建可以在所有方向滚动的高性能树形结构。我们还更新了 package 中包含的示例应用，增加了几个使用 TableView 和 TreeView widget 的新示例。

🔗 two_dimensional_scrollables 

https://pub.dev/packages/two_dimensional_scrollables

🔗 TreeView 

https://pub.dev/documentation/two_dimensional_scrollables/latest/two_dimensional_scrollables/TreeView-class.html

🔗 TableView

https://pub.dev/documentation/two_dimensional_scrollables/latest/two_dimensional_scrollables/TableView-class.html

TreeSliver 也被添加到框架中，用于在一维滚动中构建树形结构。TreeView 和 TreeSliver API 相匹配，您可以轻松切换适合您用例的 API。

🔗 TreeSliver

https://api.flutter.dev/flutter/widgets/TreeSliver-class.html

CarouselView

此版本包括了 Material Design 轮播界面 widget: CarouselView。CarouselView 呈现 "Uncontained" 布局：允许项目滚动到容器边缘的可滚动项目列表，以及其前后的项目在视图内外滚动时，可以动态改变大小。

🔗 Material Design 轮播界面

https://m3.material.io/components/carousel/overview

🔗 Uncontained

https://m3.material.io/components/carousel/specs#477de3a1-c9df-4742-baf3-bcd5eeb3764c

Widget 提供的更多功能

此版本包含一些改变核心 widget 逻辑 (并非特定于设计) 位置的工作，即将核心 widget 逻辑从 Material 库移至 Widget 库，以便更广泛地使用。这包括：

• Feedback widget，可用于轻松提供设备的触感和音频反馈，以响应点击、长按等手势。

• ToggleableStateMixin 和 ToggleablePainter，用于构建切换 widget 的基类，如复选框、开关和单选按钮。

🔗 Feedback

https://github.com/flutter/flutter/pull/148523

🔗 ToggleableStateMixin 和 ToggleablePainter

https://github.com/flutter/flutter/pull/148272

增强的 AnimationStatus 枚举功能

得益于社区成员 @nate-thegrate 的卓越贡献，AnimationStatus 添加了增强的枚举功能，包括以下 getter:

• isDismissed

• isCompleted

• isRunning

• isForwardOrCompleted

🔗 @nate-thegrate

https://github.com/nate-thegrate

🔗 贡献

https://github.com/flutter/flutter/pull/147801

🔗 AnimationStatus

https://api.flutter.dev/flutter/animation/AnimationStatus.html

其中一些 getter 已存在于 Animation 子类中，如 AnimationController 和 CurvedAnimation。现在，所有这些状态 getter 除了在 AnimationStatus 可使用之外，在 Animation 子类中也都可用。最后，AnimationController 还添加了一个 toggle 方法来切换动画的方向。

🔗 Animation 

https://api.flutter.dev/flutter/animation/Animation-class.html

🔗 AnimationController

https://api.flutter.dev/flutter/animation/AnimationController-class.html

🔗 CurvedAnimation

https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html

🔗 toggle 

https://api.flutter.dev/flutter/animation/AnimationController/toggle.html

SelectionArea 更新

Flutter 的 SelectionArea 现在支持更多原生手势，比如用鼠标点击三次和在触摸设备上双击。默认情况下，SelectionArea 和 SelectableRegion widget 使用这些新手势。

🔗 SelectionArea

https://api.flutter.dev/flutter/material/SelectionArea-class.html

🔗 SelectableRegion 

https://api.flutter.dev/flutter/widgets/SelectableRegion-class.html

三次点击

• 三次点击 + 拖动：扩展所选段落。

• 三次点击：选择点击位置的段落。

双击

• 双击 + 拖动：扩展所选词块 (支持在原生 Android/Fuchsia/iOS 和 iOS Web 上使用)。

• 双击：选择点击位置的字词 (支持在原生 Android/Fuchsia/iOS 和 Android/Fuchsia Web 上使用)。

引擎

Impeller

提高性能和保真度

为了预期即将在稳定版本中移除 iOS 上的 Impeller 退出选项，我们一直在努力改进 Impeller 的性能和保真度。例如，一系列对文本渲染进行的改进大大提高了 emoji 滚动的性能，从而消除了当滚动大量 emoji 时产生的卡顿现象，这是对 Impeller 文本渲染能力的绝佳压力测试。

🔗 大大提高了 emoji 滚动的性能

https://github.com/flutter/flutter/issues/138798

此外，通过解决一系列的问题，我们大大提高了此版本中 Impeller 文本渲染的保真度。特别是文本粗细、间距和字距现在都与原生渲染器的文本保真度相匹配。

△ 之前 (字距不正确，字体也比预期的更细)

△ 之后

△ 之前 ("vergelijken" 中的间距不正确)

△ 之后

🔗 解决一系列的问题

https://github.com/flutter/engine/pull/53042

Android 上的 Impeller 预览版

在 Flutter 3.24 中，Android 上的 Impeller 仍为预览版。由于 Android 14 中的一个问题影响了 Impeller 用于平台视图的 API，我们延长了预览期。Android 团队已经修复了这个问题，但许多已部署的设备仍将在短时间内运行未修复 Android 版本。因为解决这些问题意味着需要进行额外的 API 迁移，所以稳定版本的发布时间会相应地延长。出于谨慎考虑，也为了确保 Flutter 应用可以在更广泛的设备上运行，我们将 Impeller 设为默认渲染器的计划推迟到今年发布稳定版本的时候。

🔗 Android 14 中的一个问题

https://github.com/flutter/flutter/issues/146499#issuecomment-2082873125

在 3.24 版本趋于稳定期间，我们会继续在 Android 上使用 Impeller 预览版，因此请各位 Flutter 开发者升级到最新的稳定版本。在启用 Impeller 后，如果遇到任何问题，请提交相关问题报告。当前阶段的反馈对于确保 Impeller 在 Android 平台上取得成功，以及我们能够在今年晚些时候自信地将其设为默认渲染器至关重要。由于 Android 硬件生态系统的多样化，关于 Impeller 最有价值的反馈应包含出现问题的具体设备型号和 Android 版本的详细信息。

改进了缩放图像的默认设置

在此版本中，图像的默认设置 FilterQuality 已从 FilterQuality.low 改为 FilterQuality.medium。当一个图像远大于其目标矩形时 (这是一种常见情况)，FilterQuality.low 会导致图像看起来更加 "像素化"，渲染速度比 FilterQuality.medium 更慢。展望未来，团队还在探索更适合各个 FilterQuality 级别的设置。

Flutter GPU 预览

Flutter 为 Flutter GPU 的渲染功能引入了重大更新，可通过主要渠道获取。此底层图形 API 允许开发者使用 Dart 代码和 GLSL 着色器创建自定义渲染器，而无需任何原生平台代码。

Flutter GPU 拓展了 Flutter 的直接渲染能力，实现了高级图形和 3D 场景。此外，它需要 Impeller 渲染后端，目前支持在 iOS、macOS 和 Android 上使用。尽管处于早期预览阶段，但最终 Flutter GPU 旨在支持所有 Flutter 平台。

此 API 允许完全控制渲染通道附件、顶点阶段和上传数据到 GPU。这种灵活性对于创建复杂的渲染解决方案 (从 2D 角色动画到复杂的 3D 场景) 至关重要。

开发者可以通过切换到主要渠道并将 flutter_gpu package 添加到项目中来开始使用 Flutter GPU。接下来的几个月，我们将推出更多功能并提高稳定性，以及更高级别的渲染库 (如 flutter_scene)，以简化这些高级功能的使用。

您可以阅读 Flutter GPU 博文更深入地了解 Flutter GPU 及如何在项目中利用它。无论您是创建游戏还是复杂的图形，Flutter 新的 GPU 功能都将使其成为您产品的理想之选。

🔗 Flutter GPU 博文

https://medium.com/flutter/getting-started-with-flutter-gpu-f33d497b7c11

Web

多视图嵌入

Flutter Web 应用现在可以利用多视图嵌入功能，让开发者同时在多个 HTML 元素中渲染内容。此功能称为 "嵌入模式" 或 "多视图"，可灵活地将 Flutter 视图集成到现有 Web 应用中。

在多视图模式下，Flutter Web 应用不会在启动时立即渲染，而是会等待主应用使用 addView 方法添加第一个 "视图"。主应用可以动态添加或移除这些视图，并且 Flutter 会相应地调整其 widget。

要启用多视图模式，请在 flutter_bootstrap.js 文件的 initializeEngine 方法中设置 multiViewEnabled: true。然后，您可以利用 JavaScript 管理视图，将其添加到指定的 HTML 元素中，并根据需要移除。每次视图添加和移除都会在 Flutter 中触发更新，从而实现动态内容渲染。

此功能特别适用于将 Flutter 集成到需要使用多个独立 Flutter 视图的复杂 Web 应用。它还支持对每个视图自定义初始化数据，从而实现个性化配置和交互式体验。

您可以查看官方文档深入了解如何在 Flutter Web 应用中实现多视图嵌入。

🔗 官方文档

https://docs.flutter.dev/platform-integration/web/embedding-flutter-web

变现

视频广告变现支持

我们推出了一个新的交互式媒体广告 (IMA) 插件，以支持在 Flutter 移动应用中完成插播视频广告变现。除了主要支持展示广告格式的现有 Google 移动广告 (GMA) 插件外，新的 IMA 插件还为 Flutter 应用提供了新的广告变现机会。

🔗 交互式媒体广告 (IMA) 插件

https://pub.dev/packages/interactive_media_ads

🔗 Google 移动广告 (GMA) 插件

https://pub.dev/packages/google_mobile_ads

插播视频广告通常会在视频内容播放前 (前贴片广告)、播放中 (中插广告) 或播放后 (后贴片广告) 向用户展示。有些插播视频广告支持跳过。

Flutter IMA 的优势：

• 在 Flutter 应用上通过视频播放器内容实现无缝变现。例如，您现在部署了 Flutter IMA 插件，便可在应用用户点击播放视频内容前先展示 15 秒的广告，再开始播放视频内容。

• 利用原生 IMA SDK 的相同优势，包括访问高级 Google 广告需求和行业标准合规性 (如 IAB VAST)。

🔗 IAB VAST

https://iabtechlab.com/standards/vast/

初始发布版本目前支持在 Android 和 iOS 平台上的前贴片广告，很快便会支持中插广告。您可以即刻开始探索如何针对 Flutter 应用视频内容使用新的 IMA 插件，并将关于 GitHub 的任何问题或疑虑告诉我们。

🔗 GitHub

https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+interactive_media_ads%22

欢迎您查阅相关资源：插件指南、示例应用、Git 代码库。

🔗 插件指南

https://pub.dev/packages/interactive_media_ads

🔗 示例应用

https://pub.dev/packages/interactive_media_ads/example

🔗 Git 代码库

https://github.com/flutter/packages/tree/main/packages/interactive_media_ads

iOS

Swift Package Manager 初始支持

如今，Flutter 使用 CocoaPods 来管理原生 iOS 或 macOS 依赖项。

Flutter 3.24 增加了对 Swift Package Manager 的早期支持。这会带来以下几项好处：

1. 访问 Swift package 生态系统。Flutter 插件将能够利用不断增长的 Swift package 生态系统！
2. 简化 Flutter 安装。Swift Package Manager 已与 Xcode 绑定。将来，您无需安装 Ruby 和 CocoaPods 即可在 Apple 平台上使用 Flutter。

🔗 Swift package

https://swiftpackageindex.com/

我们鼓励插件作者尝试在您的插件中添加对 Swift Package Manager 的支持，并向我们反馈您的使用体验。

🔗 尝试在您的插件中添加对 Swift Package Manager 的支持

https://docs.flutter.dev/packages-and-plugins/swift-package-manager/for-plugin-authors#how-to-add-swift-package-manager-support-to-an-existing-flutter-plugin

如果您要针对 Flutter 对 Swift Package Manager 的支持提供反馈，请提交问题报告。

🔗 提交问题报告

https://github.com/flutter/flutter/issues/new/choose

生态系统

Shared Preferences 插件更新

我们向 shared_preferences 插件添加了两个新的 API: SharedPreferencesAsync 和 SharedPreferencesWithCache。最重要的变化是，Android 实现使用的是 Preferences DataStore 而不是 Shared Preferences。

🔗 shared_preferences

https://pub.dev/packages/shared_preferences

SharedPreferencesAsync 允许用户直接调用平台，以获取设备上最新保存的偏好设置。与使用缓存版本不同的是，调用方式为异步，速度稍慢。这对于可以通过其他系统或 isolates 更新的偏好设置非常有用，因为这些更新会使缓存变得过时。

SharedPreferencesWithCache 构建在 SharedPreferencesAsync 的基础之上，允许用户同步访问本地缓存的偏好设置副本。此 API 与旧的 API 类似，但现在可以使用不同的参数进行多次实例化。

当前生态系统中最常用的插件之一是 SharedPreferences API，未来这些新的 API 会取而代之，但生态系统切换到新的 API 也需要一定的时间。

2024 年欧洲 Flutter 和 Dart Package 生态系统峰会

作为 2024 年 Fluttercon Europe 的一部分，我们举办了首届线下 Flutter 和 Dart Package 生态系统峰会，这是 2023 年 8 月举办的首届线上峰会的延续。欢迎您查看峰会的要点摘要。

🔗 要点摘要

https://docs.google.com/document/d/e/2PACX-1vRFLdpIJYO5YPARcyUT1FYPzwkFb1hxh_agqnCXxsyirXocLZS5jobs3xFV5ZGpSQHLHZiBzqbJlXNV/pub

我们很高兴地宣布，下届峰会将于 2024 年 9 月 20 日在纽约市的 Fluttercon USA 举行！如果您是 package 作者或贡献者，并且希望参加这次峰会，欢迎您注册以预留位置。

🔗 Fluttercon USA 

https://flutterconusa.dev/

🔗 注册

https://rsvp.withgoogle.com/events/flutter-package-ecosystem-summit-usa-2024

此次峰会汇聚了 package 作者和维护者，围绕以下主题举行非正式会议的讨论：

• 主题 1 - 原生互操作性的过去、现在和未来

• 主题 2 - 可持续的 package 维护模型

• 主题 3 - 解决 package 生态系统碎片化的问题

我们相信此次峰会 (特别是在融入更广泛的 Flutter 和 Dart 活动之后) 将为社区公开讨论提供宝贵的平台，不仅有助于揭示关键挑战，还能为解决方案集思广益。我们期待与社区合作，在未来举办更多此类峰会。

DevTools 和 IDE

此版本对 Flutter DevTools 工具套件进行了一些令人兴奋的改进。

如果您也好奇 Flutter 应用是否可以构建超出预期的 Widget 数量，DevTools Performance 工具中的新功能可以助您解决这个问题。使用新的重建统计数据 (Rebuild Stats) 功能，您可以捕获应用中甚至特定 Flutter 框架中 widget 构建次数的信息。

△ DevTools Performance 工具跟踪重建统计数据的屏幕截图。

我们对网络性能分析器 (Network profile) 和 Flutter Deep Links 等工具进行了优化和关键错误修复，并进行了一些常规改进，以便您在 IDE 中使用 DevTools 时获得更好的体验。说到 IDE，您是否知道可以直接在 IDE 中使用各种 DevTools 工具呢？

△ 在 VS Code 窗口中打开 DevTools 屏幕。

△ 在 Android Studio 工具窗口中打开 DevTools 屏幕。

此版本包括在 VS Code 中对 Flutter 侧边栏所作的改进，旨在让您可以更轻松地访问所需工具。您可以升级到最新版本的 VS Code 以及 Flutter 和 Dart 扩展程序，以访问改进后的侧边栏。

△ Flutter 侧边栏具有自适应性，可根据您的工作区进行缩放

此版本还包括对 DevTools 扩展框架所作的一些重大改进。现在，无论您是调试 Dart 或 Flutter 测试，还是不调试任何内容，只在 IDE 中编写代码，都可以使用 DevTools 扩展 (由某个 package 依赖项提供的工具)。如果您想在这些过程中使用工具 (或构建工具)，现在即可实现。

🔗 DevTools 扩展

https://docs.flutter.dev/tools/devtools/extensions

如需详细了解 Flutter 3.24 中包含的所有更新，欢迎您查看 DevTools 2.35.0、2.36.0 和 2.37.2 的版本说明。

🔗 2.35.0

https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.35.0

🔗 2.36.0 

https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.36.0

🔗 2.37.2

https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.37.2

重大变更和弃用

此版本中的重大变更包括对 Navigator 页面 API、PopScope 中的通用类型、Flutter Web 的默认渲染器所作的更改以及一些新的弃用通知。您可以参阅重大变更的迁移指南了解完整列表。

🔗 Navigator 页面 API

https://docs.flutter.dev/release/breaking-changes/navigator-and-page-api

🔗 PopScope 中的通用类型

https://docs.flutter.dev/release/breaking-changes/popscope-with-result

🔗 Flutter Web 的默认渲染器

https://docs.flutter.dev/platform-integration/web/renderers

🔗 重大变更的迁移指南

https://docs.flutter.dev/release/breaking-changes

一如既往，我们非常感谢社区为测试工作所做的贡献，帮助我们识别以上重大变更。如要了解详情，您可以查看 Flutter 的重大变更政策。

🔗 测试工作所做的贡献

https://github.com/flutter/tests/blob/master/README.md

🔗 Flutter 的重大变更政策

https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes

总结

Flutter 成功的核心在于由大家组成的卓越社区。大家的倾情贡献和坚定热情推动了此版本的诞生。衷心感谢大家。

如要深入了解此版本更新的具体内容和成果，欢迎您参阅 Flutter 3.24 的版本说明和更新日志，以获取新增功能的详尽列表。

🔗 版本说明

https://docs.flutter.dev/release/release-notes/release-notes-3.24.0

🔗 更新日志

https://github.com/flutter/flutter/blob/main/CHANGELOG.md

Flutter 3.24 以及 Dart 3.5 现已在稳定渠道中正式发布。使用最新版 Flutter 踏上全新开发旅程，就像运行 "flutter upgrade" 一样轻松。期待看到您用 Flutter 开发的杰作！

推荐阅读

如页面未加载，请刷新重试

 点击屏末 | 阅读原文 | 即刻了解 Flutter 社区的最新资讯

---